//
// 输入昵称进入聊天室

$("body").on('click', '.im-btn', function(){

	var nickname = $(".im-input").val()
	var vartar =  "./img/vartar/vartar_0" + Math.floor(Math.random() * 20) + ".jpg";

	if(nickname != ''){
		$(".im-door").hide();
		$(".imBox").show();
		// 连接webSocket
		init(nickname, vartar);
	}else{
		alert("请输入昵称再进入聊天室。");
	}

})

//
// 连接 接受数据 关闭
function init(nickname, vartar){
	//
	// websocket 
	if ("WebSocket" in window)
	{
		// alert("您的浏览器支持 WebSocket!");
		
		// 打开一个 web socket
		var ws = new WebSocket("ws://localhost:56732");
		
		ws.onopen = function()
		{
			console.log("已连接")

			// 发送问候
			var content = "大家好，请叫我" + nickname ;
			// ws.send("message:"+content);
			showMsgFromMe(content, vartar);

			var info = {
				'type': 'start',
				'uid': '',
				'nickname': nickname,
				'vartar': vartar,
				'content': content

			}
			ws.send(JSON.stringify(info));
			console.log(info)
		};
		
		ws.onmessage = function (evt) 
		{ 

			var msg = JSON.parse(evt.data);
			console.log(msg);

			switch(msg.type){
				case "welcome" :
					// 显示欢迎消息
					$(".im-tip").text("欢迎"+msg.content+"来到小木屋！");
					$(".im-tip").fadeIn("slow");
					setTimeout(function(){
						$(".im-tip").fadeOut("slow");
					},2000);
					break;
				case "numbers" :
					// 更新聊天室人数
					$(".im-number").text(msg.content);
					break;
				default:
					// 显示消息
					showMsgFromOhter(msg.content, msg.vartar);
			}

			console.log("数据已接收")
		};
		
		ws.onclose = function()
		{ 
			// 关闭 websocket
			console.log("连接已关闭")
		};
	}else{
		// 浏览器不支持 WebSocket
		alert("您的浏览器不支持 WebSocket!");
	}

	//
	// 发消息
	$('.sendBtn').on('click',function(){
		var news=$('#dope').val();
		if(news==''){
			alert('不能为空');
		}else{
			$('#dope').val('');
			// 显示消息
			showMsgFromMe(news, vartar);

			var info ={
				'type': 'message',
				'uid': '',
				'nickname': nickname,
				'vartar': vartar,
				'content': news
			}
			ws.send(JSON.stringify(info));

		}
	})
}

// 
// 显示自己发出的消息
function showMsgFromMe(content, vartar){
	var item='';
	item+='<li>'+
			'<div class="rightHead"><img src="'+ vartar +'"/></div>'+
			'<div class="newsRight"><img class="jiao" src="img/icon/jiao_right.jpg">'+ content +'</div>'+
		'</li>';

	$('.newsList').append(item);
	$('.imCont').scrollTop($('.imCont')[0].scrollHeight );
}

// 
// 显示收到的消息
function showMsgFromOhter(content, vartar){
	var item='';
	item+='<li>'+
			'<div class="leftHead"><img src="'+ vartar +'"/></div>'+
			'<div class="newsLeft"><img class="jiao" src="img/icon/jiao_left.jpg">'+content+'</div>'+
		'</li>';	
	
	$('.newsList').append(item);	
	$('.imCont').scrollTop($('.imCont')[0].scrollHeight );
}


	